<template>
  <view class="list">
    <view class="item" v-for="(v,i) in list" :key="i">
      <view class="circle" :style="`background:${v.color}`"></view>
      <label>{{v.name}}</label>
      <text>{{v.value}}</text>
    </view>
  </view>
</template>
<script setup>
const props = defineProps({
	list: Array
	});
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50rpx;
  flex: 1;
  .circle {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }
  .item {
    display: flex;
    min-width: 50%;
    flex-basis: 50%;
    margin-top: 20rpx;
  }
  label {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #181A1B;
    margin-right: 16rpx;
  }
  text {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #455BDF;
  }
}
</style>